import React from 'react';
import Search from '../../../components/Search'
import { Button, Table, Space, message, Pagination } from 'antd'
import './index.less'

class Nav21 extends React.Component {
    state = {
        selectedRowKeys: [],
        loading: false,
        total: 100,
        current: 1,
        pageSize: 10
    }
    componentDidMount() {
        this.init()
    }
    init = () => {
        this.setState({
            loading: true
        }, () => {
            setTimeout(() => {
                this.setState({
                    loading: false
                })
            }, 1000);
        })
    }
    getSearchValues(values) {
        console.warn('getSearchValues', values)
    }
    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };
    handleRemove = () => {
        if (!this.state.selectedRowKeys.length) {
            message.error('请选择操作对象')
            return
        }
    }
    onCurrentChange = current => {
        this.setState({
            current
        }, () => {
            this.init()
        })
    }
    onShowSizeChange = (current, pageSize) => {
        this.setState({
            pageSize
        }, () => {
            this.init()
        })
    }
    render() {
        const searchList = [
            {
                type: 'input',
                label: '字段A',
                key: 'filedA',
                placeholder: '请输入字段A'
            },
            {
                type: 'input',
                label: '字段D',
                key: 'filedD',
                placeholder: '请输入字段D'
            },
            {
                type: 'rangePicker',
                label: '字段E',
                key: 'filedE',
                placeholder: ['开始日期', '结束日期']
            },
            {
                type: 'input',
                label: '字段R',
                key: 'filedR',
                placeholder: '请输入字段R'
            },{
                type: 'input',
                label: '字段J',
                key: 'filedJ',
                placeholder: '请输入字段J'
            },{
                type: 'input',
                label: '字段H',
                key: 'filedH',
                placeholder: '请输入字段H'
            },{
                type: 'input',
                label: '字段Q',
                key: 'filedQ',
                placeholder: '请输入字段Q'
            },
            {
                type: 'datePicker',
                label: '字段C',
                key: 'filedC',
                placeholder: '请选择字段C'
            },
            {
                type: 'select',
                label: '字段B',
                key: 'filedB',
                placeholder: '请选择字段B',
                list: [
                    { value: 'jack', name: 'Jack' },
                    { value: 'lucy', name: 'Lucy' },
                    { value: 'tom', name: 'Tom' },
                ]
            }
        ]
        const dataSource = [
            {
                key: '1',
                name: '胡彦斌',
                age: 32,
                address: '西湖区湖底公园1号',
            },
            {
                key: '22314321525415',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '215234124',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '21`1232142145',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '2324121515',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '212143521355',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '212345',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '2111115',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '222215',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '213335',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '233315',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '223215',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '2121345',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '3421215',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '3214215',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '21231425',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '24654615',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '32421215',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '645215',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '212415',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '23543215',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '232515',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '2432415',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '22315',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '78215',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '8215',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '2175',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '2615',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '2155',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '2415',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '2315',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '2215',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }, {
                key: '2115',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            },
            {
                key: '45765',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            },
            {
                key: '346445',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            },
            {
                key: '3475',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            },
            {
                key: '345',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            },
            {
                key: '657',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            },
            {
                key: '346',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            },
            {
                key: '234',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            },
            {
                key: '123',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            }
        ];
        const columns = [
            {
                title: '姓名',
                dataIndex: 'name',
                key: 'name',
                ellipsis: true
            },
            {
                title: '年龄',
                dataIndex: 'age',
                key: 'age',
                ellipsis: true
            },
            {
                title: '住址',
                dataIndex: 'address',
                key: 'address',
                ellipsis: true
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <Space size="middle">
                        <a>编辑</a>
                        <a>删除</a>
                    </Space>
                )
            }
        ];
        const { selectedRowKeys, total, current, pageSize, loading } = this.state
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange
        };
        return (
            <div className="search-list-box">
                <Search searchList={searchList} getSearchValues={this.getSearchValues}></Search>
                <div className="edit-btns">
                    <Button type="primary">新增</Button>
                    <Button className="right-btn" onClick={this.handleRemove}>删除</Button>
                </div>
                <Table className="my-table" loading={loading} scroll={{ y: 'calc(100vh - 382px)' }} pagination={false} rowSelection={rowSelection} dataSource={dataSource} columns={columns} />
                <Pagination className="my-pagination" total={total} current={current} pageSize={pageSize} onChange={this.onCurrentChange} onShowSizeChange={this.onShowSizeChange} showSizeChanger showQuickJumper showTotal={total => `总共 ${total} 条`} />
            </div>
        )
    }
}

export default Nav21
